import React from "react";
import { MailOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import { useLocation, useNavigate } from 'react-router'

type MenuItem = Required<MenuProps>["items"][number];

const PATH_PREFIX = '/tobScene'

// router.path 与 menu.key 的映射
const MENU_ITEMS_KEY_MAP = {
  [`${PATH_PREFIX}/tablePage`]: "tablePage",
  [`${PATH_PREFIX}/modalPage`]: "modalPage",
};

const MENU_ITEMS: MenuItem[] = [
  {
    label: "tablePage",
    key: "tablePage",
    icon: <MailOutlined />,
  },
  {
    label: "modalPage",
    key: "modalPage",
    icon: <MailOutlined />,
  },
];

const TopMenu: React.FC = () => {

  // 获取当前页面url（vue中的route.path）
  const location = useLocation();
  // 路由转跳api（vue中router.push），navigate执行后，会触发当前FC的重新渲染，搭配location可以完成路由状态的计算，如下计算currentMenuKey
  const navigate = useNavigate();
  const currentMenuKey = MENU_ITEMS_KEY_MAP[location.pathname as keyof typeof MENU_ITEMS_KEY_MAP];

  const onClick: MenuProps['onClick'] = (e) => {
    navigate(e.key);
  };

  return <Menu items={MENU_ITEMS} mode="horizontal" onClick={onClick} selectedKeys={[currentMenuKey]} />;
};

export default TopMenu;